<template>
  <div class="item_container flex">
    <div class="item" @click="handler(item.id)" v-for="(item, index) in list" :key="item.id">
      <!-- 课程大图 -->
      <image class="img" :src="type == 'course' ? item.cover : item.avatar" mode="widthFix" />
      <!-- 课程标题 -->
      <div v-if="type == 'course'">
        <div class="title">{{ item.title }}</div>
        <div class="study">
          <uni-icons type="fire-filled" size="18" color="red"></uni-icons>已有{{
            item.lessonNum
          }}人学习
        </div>
        <div class="footer flex">
          <div class="money">¥ {{ item.price }}</div>
          <div class="buy">已有{{ item.buyCount }}购买</div>
        </div>
      </div>
      <!-- 老师介绍 -->
      <div v-else>
        <div class="intro">{{ item.intro }}</div>
        <div class="name">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
</script>

<style scoped lang="less">
.item_container {
  width: 100%;
  flex-wrap: wrap;
}

.item_container .item {
  width: 50%;
  padding: 30rpx;
  box-sizing: border-box;
}

.item_container .item .img {
  width: 100%;
}

.item_container .item .title {
  height: 40rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: 900;
  margin: 10rpx 0rpx;
}

.item_container .item .study {
  font-size: 24rpx;
}

.item_container .item .footer {
  justify-content: space-between;
  font-size: 24rpx;
  margin: 10rpx 0rpx;
}

.item_container .item .footer .money {
  color: red;
}

.item_container .item .intro {
  width: 100%;
  height: 60rpx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 24rpx;
}

.item_container .item .name {
  color: aquamarine;
  font-size: 30rpx;
  font-weight: 900;
  margin-top: 20rpx;
}</style>
